<template>
    <div class="common viewSign">
        <innerCommon :location="location">
            <template slot="left">
                <span>考生列表</span>
                <a-input-search class="inputStyle" placeholder="请输入考生名称"  v-model="searchValue" enter-button @search="onSearch" />
            </template>
            <template slot="right">
                <a-button v-if='searchInfo.type==0' type="primary" @click="uploadModal=true" style="margin:0 10px;"><a-icon type="download" />导入</a-button>
                <download 
                     v-if='searchInfo.type==0'
                    :name="'导出'" 
                    :api="'manage/onePlusXExam/exportExaminee'"
                    :fileName="'考生列表.xls'"
                    methods="post"
                    :formData="{'examId':searchInfo.examId}"
                ></download>
                <a-button v-if='searchInfo.type==0' type="primary" @click="openAdd()" style="margin:0 10px;">新增</a-button>
                <a-button type="primary" @click="returnBack()">返回</a-button>
            </template>
            <div slot="table">
                <topList
                    :topList="topList"
                    :currentItem="searchInfo.type"
                    @changeTop="changeTop"
                ></topList>
                <a-table 
                    size="middle"
                    :columns="columns" 
                    :data-source="list" 
                    :pagination="pagination"
                    :rowKey="record=>record.id"
                    @change="changePage"
                    :locale="{'emptyText': '暂无数据'}"
                    bordered>
                    <div slot="status" slot-scope="index,record"> 
                        <span v-if="record.finalCheck==0" style="color:orange">待审核</span>
                        <span v-else-if="record.finalCheck==1" style="color:green">已通过</span>
                        <span v-else style="color:red">未通过</span>
                    </div>
                    <div slot="action" slot-scope="index,record" class="tableAction" v-if="searchInfo.type==0">
                        <span @click="edit(record)">修改</span>
                        <confirmBox
                            @handleOk="deleteExaminee(record.id)"
                            :typeName="'删除'"
                            :noticeInfo="record.realname"
                            :noticeType="'考生'"
                        ></confirmBox>
                    </div>
                    <div slot="action" slot-scope="index,record" class="tableAction" v-else>
                        <span v-if="record.finalCheck!=1" @click="isPass(1,record.id)">通过</span>
                        <span v-if="record.finalCheck!=2" @click="isPass(2,record.id)">不通过</span>
                        <confirmBox
                            @handleOk="deleteExaminee(record.id)"
                            :typeName="'删除'"
                            :noticeInfo="record.realname"
                            :noticeType="'考生'"
                        ></confirmBox>
                    </div>
                </a-table>
            </div>
        </innerCommon>

        <!-- 新增弹框 -->
        <a-modal
            :title="type==0?'新增':'修改'"
            :visible="addModal"
            @cancel="addModal=false"
            :destroyOnClose='true'
            width="700px"
            okText="确认"
            cancelText="取消"
            @ok="submitAdd()"
        >
            <eform
                :formData="formData"
                ref="form"
                :fields="fields"
                v-if="fields||type==0"
            >
                <a-radio-group 
                    name="radioGroup"
                    v-decorator="['gender',{rules: [{ required: true, message: '请选择性别' }]}]"
                    slot="gender">
                    <a-radio :value="'男'">
                        男
                    </a-radio>
                    <a-radio :value="'女'">
                        女
                    </a-radio>
                </a-radio-group>
            </eform>
        </a-modal>

        <!-- 导入考生 -->
        <downloadAndUpload 
            :uploadModal="uploadModal"
            :name="'导入'" 
            title="导入考生"
            api='common/downloadExamineeTemplate'
            fileName="导入考生模板.xls"
            :uploadData="{'name':'examId','value':searchInfo.examId}"
            @cancel="uploadModal=false"
            uploadApi="manage/onePlusXExam/importExaminee"
            @uploadCallback="importExaminee"
        ></downloadAndUpload>
    </div>
</template>
<script>
import innerCommon from "@/components/common/innerCommon"
import topList from "@/components/common/topList"
import eform from "@/components/common/form"
import confirmBox from "@/components/common/confirmBox"
import downloadAndUpload from "@/components/common/downloadAndUpload"
import download from "@/components/common/download"

import {
    getExamineeListApi,
    addSignExamineeApi,
    checkExamineeIdCardApi,
    checkExamineeIdPhone,
    registExamineeApi,
    updateSignExamineeApi,
    deleteSignExamineeApi,
    submitAddExamineeApi
} from "@/request/api"
const columns=[
    {
        title: '序号',
        dataIndex: 'index',
        width:70
    },{
        title: '姓名',
        dataIndex: 'realname',
    },{
        title: '姓别',
        dataIndex: 'gender',
    },{
        title: '身份证号',
        dataIndex: 'idCardNum',
    },{
        title: '手机号',
        dataIndex: 'telephone',
    },{
        title: '所属院校',
        dataIndex: 'instituteName',
    },{
        title: '所属专业',
        dataIndex: 'major',
    },{
        title: '考试名称',
        dataIndex: 'title'
    },{
        title: '操作',
        scopedSlots: { customRender: 'action' },
    }
]
export default {
    name:"viewSign",
    components:{innerCommon,topList,eform,confirmBox,downloadAndUpload,download},
    watch:{
        searchValue:function(val){
            this.searchValue=val.trim()
        }
    },
    created(){
        this.searchInfo.examId=this.$route.query.examId
        this.location=[
            {name:'1+X管理',path:''},{name:'考务管理',path:'/examineeManage'},{name:'报名查看',path:''}
        ]
        this.init()
    },
    data(){
        let validateExamineeName=(rule,value,callback)=>{
            if(value){
                if(value.trim().length === 0){
                    callback(new Error('不能全是空格'))
                }else{
                    callback()
                }
            }else{
                callback()
            }
        }
        let validateIdNumber=(rule,value,callback)=>{
            let reg=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
            if(!value||reg.test(value)){
                if(value){
                    if(value==this.fields.idCardNum){
                        callback()
                    }else{
                        checkExamineeIdCardApi({'idCardNum':value}).then(res=>{
                            if(res.data.isExist){//说明该考生已存在
                                this.$confirm({
                                    title: '该考生已存在，是否添加？',
                                    cancelText:"否",
                                    okText:'是',
                                    onOk:()=>{
                                        this.getToken(addSignExamineeApi,{'examId':this.searchInfo.examId,'userId':res.data.userId},res=>{
                                            this.$message.success(res.message)
                                        })
                                        this.addModal=false
                                        callback()
                                        this.init()
                                    },
                                    onCancel:()=>{
                                        callback(new Error('请输入正确的身份证号'))
                                    },
                                });
                            }else{
                                callback()
                            }
                        })
                    }
                }else{
                    callback(new Error(' '))
                }
            }else{
                callback(new Error('请输入正确的身份证号'))
            }
        }
        let validatePhone=(rule,value,callback)=>{
            let reg=/^1[345789]\d{9}$/
            if(!value||reg.test(value)){
                if(value==this.fields.telephone){
                    callback()
                }else{
                    checkExamineeIdPhone({'telephone':value}).then(res=>{
                        if(res.data.isExist){
                            callback(new Error('该号码已存在'))
                        }else{
                            callback()
                        }
                    })
                }
            }else{
                callback(new Error('请输入正确格式的电话'))
            }
        }
        const formData=[
            {
                label:"姓名",
                prop:"realname",
                placeholder:'请输入姓名',
                rules:[{required:true,message:'请输入姓名'},{validator:validateExamineeName}],
            },{
                label:"性别",
                scopedSlots: { customRender: 'gender'},
            },{
                label:"身份证号",
                prop:"idCardNum",
                placeholder:'请输入身份证号',
                rules:[{required:true,message:'请输入身份证号'},{validator:validateIdNumber}],
            },{
                label:"手机号码",
                prop:"telephone",
                placeholder:'请输入手机号码',
                rules:[{required:true,message:'请输入手机号码'},{validator:validatePhone}],
            },{
                label:"所属院校",
                prop:"instituteName",
                placeholder:'请输入所属院校',
                rules:[{required:true,message:'请输入所属院校'},{validator:validateExamineeName}],
            },{
                label:"所属专业",
                prop:"major",
                placeholder:'请输入所属专业',
                rules:[{required:true,message:'请输入所属专业'},{validator:validateExamineeName}],
            }
        ]
        return{
            columns,
            formData,
            location:[],
            searchValue:'',
            topList:[
                {
                    name:"已有考生",
                    id:0
                },{
                    name:'待审核考生',
                    id:1
                }
            ],
            list:[],
            pagination:{total:0,pageSize:10,current:1},
            searchInfo:{
                examId:'',
                type:0,
                page:1,
                pageSize:10,
                keyword:''
            },
            addModal:false,
            type:0,//0是新增 1是修改
            fields:null,
            examineeId:null,
            uploadModal:false
        }
    },
    methods:{
        init(){
            this.getToken(getExamineeListApi,this.searchInfo,res=>{
                this.list=res.data.rows.map((item,index)=>({
                    ...item.creator,
                    ...item.onePlusXExam,
                    ...item,
                    index:(this.searchInfo.page-1)*10+index+1
                }))
                this.pagination.total=res.data.count
            })
        },
        returnBack(){
            this.$router.go(-1)
        },
        onSearch(data){
            this.searchInfo.keyword=data
            this.init()
        },
        openAdd(){
            this.type=0
            this.fields=null
            this.addModal=true
        },
        changeTop(data){
            this.searchInfo.type=data
            if(data==0){
                this.columns[7]={
                    title: '考试名称',
                    dataIndex: 'title'
                }
            }else{
                this.columns[7]={
                    title: '申请状态',
                    scopedSlots: { customRender: 'status' },
                }
            }
            this.init()
        },
        changePage(data){
            this.searchInfo.page=data.current
            this.pagination.current=data.current
            this.init()
        },
        edit(data){
            this.examineeId=data.id
            this.type=1
            this.fields=data
            this.addModal=true
        },
        // 确认添加
        submitAdd(){
            this.$refs.form.form.validateFields().then(res=>{
                if(this.type==0){
                    this.getToken(registExamineeApi,res,data=>{//注册
                        this.getToken(addSignExamineeApi,{'examId':this.searchInfo.examId,'userId':data.data.userId},info=>{//添加
                            this.$message.success(info.message)
                            this.init()
                            this.addModal=false
                        })
                    })
                }else{
                    this.getToken(updateSignExamineeApi,{...res,'examineeId':this.examineeId},data=>{
                        this.$message.success(data.message)
                        this.init()
                        this.addModal=false
                    })
                }
                
            })
        },
        // 删除
        deleteExaminee(id){
            this.getToken(deleteSignExamineeApi,{'examineeId':id},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        // 到入考生之后的回调
        importExaminee(data){
            this.$confirm({
                title: data.message,
                cancelText:"取消",
                okText:'确定',
                onOk:()=>{
                    this.getToken(submitAddExamineeApi,{'examId':this.searchInfo.examId,'userArr':data.data},res=>{
                        this.$message.success(res.message)
                        this.uploadModal=false
                        this.init()
                    })
                },
                onCancel() {
                    this.uploadModal=false
                },
            });
        },
        isPass(type,id){
            this.getToken(updateSignExamineeApi,{'examineeId':id,'finalCheck':type},data=>{
                this.$message.success(data.message)
                this.init()
            })
        }
    }
}
</script>
<style lang="stylus">
.viewSign{
    .innerCommon{
        .content{
            margin-top:76px;
            position:relative;
        }
    }
    .tableWrapUl{
        position:absolute;
        top:-60px;
        left:0;
    }
}
</style>